/**
 * Created by maxiaoqiang on 2018/9/26.
 */
import React, {Component} from "react";

import {Row, Col, Button, Input, message, Radio, Checkbox, Popconfirm, Modal} from "antd";


import {formatChar} from "util/MyUtil";
import {HttpClient} from "util/HttpClient";


let _ordertimer = null;
const {TextArea} = Input;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;

import "./index.less";

class ExamContent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            timer: "00:00:00",
            examData: [],
            questionIndex: 0,
            select: null
        }
    }

    componentDidMount() {
        if (this.props.data) {
            this.setState({
                data: this.props.data
            });
            this.timer(this.props.data.endTime);
            HttpClient.get("/v1/question/exam?examPaperId=" + this.props.data.id)
                .then((response)=> {
                    if (response.data.code == 200) {
                        this.setState({
                            examData: response.data.data,
                            select: response.data.data[0].examAnswerHistory.userAnswer
                        });
                    }
                })
        }
    };

    leftTimer = (endDate)=> {
        var leftTime = endDate*1000 - new Date().getTime(); //计算剩余的毫秒数
        var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
        var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
        var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
        var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
        days = this.checkTime(days);
        hours = this.checkTime(hours);
        minutes = this.checkTime(minutes);
        seconds = this.checkTime(seconds);
        this.setState({
            timer: hours + ":" + minutes + ":" + seconds
        });
        if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
            this.confirmPaper();
            clearInterval(_ordertimer);
            _ordertimer = null;
        }

    };

    checkTime = (i)=> { //将0-9的数字前面加上0，例1变为01
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    };

    timer = (endTime)=> {
        var data1 = new Date().getTime()/1000;
        var data2 = endTime;
        if (data2 < data1) {
            return;
        }
        _ordertimer = setInterval(()=> {
            this.leftTimer(data2)
        }, 1000);
    };

    changeHandle = (name, value)=> {
        if (name == "multi") {
            value = value.sort().join(",")
        }
        this.setState({
            select: value
        })
    };

    // 确定答案
    confirmAnswer = ()=> {
        console.log("----this.state.select",this.state.select)
        if (this.state.select!=null) {
            this.state.examData[this.state.questionIndex].examAnswerHistory.userAnswer = this.state.select;
            if (this.state.questionIndex != this.state.examData.length - 1) {
                this.setState({
                    questionIndex: this.state.questionIndex + 1,
                    select: this.state.examData[this.state.questionIndex+ 1].examAnswerHistory.userAnswer,
                    examData: this.state.examData
                });
            }
            console.log(this.state.select);
            console.log(this.state.examData[this.state.questionIndex]);
        } else {
            message.error("请选择答案")
        }
    };

    confirmPaper = ()=> {
        let examAnswerHistory = [];
        for (let i = 0; i < this.state.examData.length; i++) {
            let data = this.state.examData[i].examAnswerHistory;
            examAnswerHistory.push(
                {
                    id: data.id,
                    userAnswer: data.userAnswer
                }
            )
        }
        this.props.commitPaper(this.state.data.id,examAnswerHistory);
    };

    render() {
        const data = this.state.data;
        const question = this.state.examData[this.state.questionIndex] ? this.state.examData[this.state.questionIndex] : {};

        return (
            <Modal
                style={{minWidth:'1000px'}}
                centered
                closable={false}
                visible={true}
                footer={null}
            >
                <div className="card-div">
                    <div
                        style={{width:"240px"}}
                        className="card-info"
                    >
                        <div className="count-down">
                            <div className="title">
                                {(data && data.name && data.name.length > 0) ? data.name : "模拟试卷"}
                            </div>
                            <div className="time-out">
                                剩余时间<span>{this.state.timer}</span>
                            </div>
                            <div className="option-div">
                                {
                                    this.state.examData.length > 0 ?
                                        this.state.examData.map((item, idx)=> {
                                            return (
                                                <div
                                                    id={"question_"+item.id}
                                                    key={idx}
                                                    onClick={()=>{
                                                        this.setState({
                                                             question: item,
                                                             questionIndex: idx,
                                                             select: item.examAnswerHistory.userAnswer?item.examAnswerHistory.userAnswer:null
                                                        })
                                                    }}
                                                >
                                                    <div
                                                        className={
                                                            this.state.questionIndex==idx?
                                                            "card choose"
                                                            :
                                                            (item.examAnswerHistory.userAnswer && item.examAnswerHistory.userAnswer!="")?"card answer":'card'
                                                        }
                                                    >
                                                        {idx + 1}
                                                    </div>
                                                </div>
                                            )
                                        })
                                        :
                                        null
                                }
                            </div>
                            <div className="commit-div">
                                <Popconfirm
                                    icon={null}
                                    placement="top"
                                    title={"您确认要交卷吗?"}
                                    onConfirm={this.confirmPaper}
                                    okText="确认交卷"
                                    cancelText="再检查一会"
                                >
                                    <Button
                                        type="primary"
                                        style={{width:'100px'}}
                                    >
                                        交卷
                                    </Button>
                                </Popconfirm>
                            </div>
                        </div>
                    </div>
                    <div
                        style={{width:"600px"}}
                        className="card-info"
                    >
                        <div className="exam-content">
                            <div className="title">
                                题目<span>{this.state.questionIndex + 1}</span>
                            </div>
                            <div>
                                {question.name ? question.name : ""}
                            </div>

                            <div className="content-div">
                                {(question.type && question.type) == 0 ?
                                    <RadioGroup
                                        key={question.id}
                                        className="radioGroupStyle"
                                        defaultValue={parseInt(question.examAnswerHistory.userAnswer)}
                                        onChange={(e)=>{this.changeHandle("radio", e.target.value)}}
                                    >
                                        {
                                            question.optionList.map((item, idx)=> {
                                                return (
                                                    <Radio key={idx} className="radioStyle" value={idx}>
                                                        {formatChar(idx)}: {item.name}
                                                    </Radio>
                                                )
                                            })
                                        }
                                    </RadioGroup>
                                    :
                                    null
                                }
                                {(question.type && question.type) == 1 ?
                                    <CheckboxGroup
                                        key={question.id}
                                        className="radioGroupStyle"
                                        defaultValue={question.examAnswerHistory.userAnswer && question.examAnswerHistory.userAnswer.length>0?question.examAnswerHistory.userAnswer.split(",").map(Number):null}
                                        onChange={(value)=>{this.changeHandle("multi", value)}}
                                    >
                                        {question.optionList ?
                                            question.optionList.map((item, idx)=> {
                                                return (
                                                    <Checkbox key={idx} className="radioStyle" value={idx}>
                                                        {formatChar(idx)}:{item.name}
                                                    </Checkbox>
                                                )
                                            })
                                            :
                                            null
                                        }
                                    </CheckboxGroup>
                                    :
                                    null
                                }
                                {(question.type && question.type) == 2 ?
                                    <RadioGroup
                                        key={question.id}
                                        className="radioGroupStyle"
                                        defaultValue={parseInt(question.examAnswerHistory.userAnswer)}
                                        onChange={(e)=>{this.changeHandle("verdict", e.target.value)}}
                                    >
                                        {
                                            question.optionList.map((item, idx)=> {
                                                return (
                                                    <Radio key={idx} className="radioStyle" value={idx}>
                                                        {formatChar(idx)}: {item.name}
                                                    </Radio>
                                                )
                                            })
                                        }
                                    </RadioGroup>
                                    :
                                    null
                                }
                                {this.state.questionType == 3 ?
                                    <TextArea className="question-input" placeholder="请输入答案解析"
                                              autosize={{ minRows: 4, maxRows: 6 }}/>
                                    :
                                    null
                                }
                            </div>
                            <div className="btn-div">
                                <Row gutter={16}>
                                    <Col span={4}>
                                        <Button
                                            type="primary"
                                            onClick={this.confirmAnswer}
                                        >
                                            确定
                                        </Button>
                                    </Col>
                                    <Col offset={12} span={8}>
                                        <Row gutter={16}>
                                            <Col className="gutter-row" span={12}>
                                                <Button
                                                    disabled={this.state.questionIndex==0?true:false}
                                                    onClick={()=>{
                                                        this.setState({
                                                            questionIndex:this.state.questionIndex-1,
                                                            select:this.state.examData[this.state.questionIndex-1].examAnswerHistory.userAnswer
                                                        })
                                                    }}
                                                >
                                                    上一题
                                                </Button>
                                            </Col>
                                            <Col className="gutter-row" span={12}>
                                                <Button
                                                    disabled={this.state.questionIndex==this.state.examData.length-1?true:false}
                                                    onClick={()=>{
                                                        this.setState({
                                                            questionIndex:this.state.questionIndex+1,
                                                            select:this.state.examData[this.state.questionIndex+ 1].examAnswerHistory.userAnswer
                                                        })
                                                    }}
                                                >
                                                    下一题
                                                </Button>
                                            </Col>
                                        </Row>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
        )
    }


}

export default ExamContent;